import React from 'react'
import { Routes, Route, Link, Outlet, Navigate } from 'react-router-dom'
import style from './index.module.less'

// 导入对应的模块组件
import lazyLoad from '../../router/lazyLoad.jsx';
const Add = lazyLoad(() => import('./add'));
const Center = lazyLoad(() => import('./center'));
const Detail = lazyLoad(() => import('./detail'));

const User = () => {
  return (
    <div className={[`${style.userPage}`]}>
      <main>
        <h2>user page</h2>
      </main>

      <nav className='nav-content'>
        <Link to="/">返回首页</Link>
        <Link to="/about">go to about</Link>
        <Link to="/user/add">添加用户</Link>
        <Link to="/user">用户中心</Link>
        <Link to="/user/detail/1">用户详情</Link>
      </nav>
      <div>
        <Routes>
          <Route path="/" exact element={<Center />}></Route>
          <Route path="add" exact element={<Add />}></Route>
          <Route path="/detail/:id" element={<Detail animate={true} />}></Route>
          <Route path="*" element={<Navigate replace to="/404" />}></Route>
        </Routes>
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  )
}


export default User;
